<script setup lang="ts">
import { useMessage } from 'naive-ui';
import { reactive } from 'vue';
import { Greet } from '../wailsjs/go/handler/HandlerGreet';

const data = reactive({
  name: "这是演示用的参数-1",
  resultText: "这是演示用的参数-2",

})

function greet() {
  Greet(data.name).then(result => {
    useMessage().info(result)
  })
}

</script>

<template>
  <n-message-provider>
    <n-layout style="height: 100%;">
      <n-layout-header style="padding: 0px; height: 120px;">
        <n-space>
          这里是各类选项、参数的选择区域
          <n-space>
            是否合并：<n-switch size="small" />
          </n-space>
          <n-space>
            重复人员处理方式：
            <n-radio-group name="radiogroup" size="small">
              <n-space>
                <n-radio value="skip">
                  仅保留新增数据
                </n-radio>
                <n-radio value="skip">
                  保留旧数据
                </n-radio>
                <n-radio value="skip">
                  合并新旧数据
                </n-radio>
              </n-space>
            </n-radio-group>
          </n-space>
        </n-space>
        <n-grid x-gap="6" :cols="3" style="height: 80px;">
          <n-gi>
            <div style="height: 100%;background-color: greenyellow;">
              这里是民政部excel文件的选择区
            </div>
          </n-gi>
          <n-gi>
            <div style="height: 100%;background-color: gray;">
              这里是区县教育部门excel文件的选择区
            </div>
          </n-gi>
          <n-gi>
            <div style="height: 100%;background-color: blue;">
              这里是输出文件的选择区
            </div>
          </n-gi>
        </n-grid>
        <n-divider />
      </n-layout-header>
      <n-layout embedded native-scrollbar style="height: calc(100% - 120px);">
        <n-grid x-gap="6" cols="3" style="height: 100%;">
          <n-grid-item>
            这里是民政部excel文件的表头清单
            <n-input v-model:value="data.name" type="text" placeholder="input name" class="input" />
            <n-button type="info" @click="greet"> Greet </n-button>
            {{ data.resultText }}
          </n-grid-item>
          <n-grid-item>
            <div style="height: 100%;background-color: yellow;">
              这里是区县教育部门excel文件的表头清单
            </div>
          </n-grid-item>
          <n-grid-item>
            <div style="height: 100%;background-color: blue; text-align: left;">
              这里用于展示各类统计，比如新增记录数、重复记录数等，并需要将重复的以列表的形式展示，代表需要手动去民政部系统上逐个标记
            </div>
          </n-grid-item>
        </n-grid>
      </n-layout>
    </n-layout>
  </n-message-provider>
</template>

<style></style>
